\label{desingWebSite}
\subsection{Introduction}
In this section we will design how the application must communicate with the user, we must also take into account all the 
requirements that have to be met by the application and we will try to design the interface as intuitive and easy to learn as 
possible, since the users of our system are not required to have a great knowledge of computers or mobile phones.

\subsection{Class diagram}
\label{classDiagramExplainWeb}

In the next diagram is shown which classes are presented in the web site and how they are linked with each other:

\begin{figure}[ht]
\centering
\includegraphics[width=1\textwidth ]{WebSite/Design/images/classdiagramWebSite.png} 
\caption{Web Site's Class Diagram}
\label{classDiagramWeb}
\end{figure}

The \emph{Position}, \emph{UserInformation} and \emph{Auth} classes are almost to be the same as the ones the web service uses. This is because 
this classes are going to be send and received when consuming web services. In fact, these objects are serialized and deserialized by the 
\emph{SOAP} libraries.

The \emph{ToServer} class is used to invoke methods in the web service. One of the most important fields in this class is the address 
("wsdl" field) of the \emph{WSDL} file that determines where is the web service located and the methods specification. Furthermore, this object 
keeps an authentication object that identifies a user. This means that each user that logs in in the web site is going to have a different 
object of this type that contains his authentication object("auth" field). The PHP session keeps the client's \emph{ToServer} object to call 
the web service in his name, with his authentication object. In addition, to avoid the server overload and improve the response time the client's 
user information is going to be cached("userInfo" field). This is because the user information is needed each time a page is generated in 
\emph{PHP}, at least to know whether the user is logged and if he is an administrator or not.

There is a function \emph{exists} that asks the web service if a nick is already been used. Usually after this request the user will create a 
new account and this can be done calling the \emph{new User} method. This functions logs in the user in the new account. The class offers the 
\emph{loginWP} method to login using the nick and password. It returns whether you are logged or not, but it could be also checked using the 
\emph{logged} function. Later the logged user's information can be changed used the \emph{changeUser} method. The \emph{logout} method logs out 
the user deleting the authentication object.

When the web sites needs the logged user's information, it should call the \emph{userInformation} function that returns a user information object 
with its information. Moreover a page of friend's user information list can be requested calling \emph{getFriendsPage}.

To get a user's position the \emph{getPositions} method is defined, that takes the target user's identification number and the number of 
positions wanted. It will return an array with the positions objects.

User searches are done using \emph{searchFriend} function. The web service will take care about deleting friends administrators from the search.

The clients authenticated as administrators can also call functions. These could create a new administrator \emph{newAdmin}, requesting users 
by page with \emph{getUsers} or even deleting them by user identification number with \emph{delUser}.



\subsection{Storyboards}
\label{webstoryboards}

\subsubsection{Login and create new user account}
\label{loginWeb}
The first use case our application has to satisfy is the \emph{Login} interface. This login form is located in the right upper 
corner of the page. Moreover, since our application has to provide a method of creating a new account for new users, we found 
correct to create another form in the same page, which is going to be located in the center, with the information that the user 
should fill, so as to give him  the opportunity to use the \emph{create new user} use case. We should keep in mind that the 
password can not be shown, so black bold dots will appear in its place. If the user makes invalid login or creates a user with 
an existing user name then the system will show him an appropriate message.

As you can see in \emph{Figure \ref{loginStoryboardWeb}} there are both the login create new account form.

\begin{figure}[ht]
\centering
\includegraphics[width=0.6\textwidth]{WebSite/Design/images/loginPage.png} 
\caption{Login and Create new User Storyboard}
\label{loginStoryboardWeb}
\end{figure}

Furthermore, in \emph{Figure \ref{loginStoryboardWeb}} if a common user clicks the \emph{Login} button or the \emph{Sign up} button, 
the system will redirect him to his home page, which is represented by \emph{Figure \ref{userHomeStoryboardWeb}}. If 
the user is an administrator then after the login he is going to be directed in his home page, which is going to be similar 
to common user's home page, and it is represented by \emph{Figure \ref{adminHomeStoryboardWeb}}.

\subsubsection{User home page}
\label{userHomeWeb} 
The design of the common user's \emph{home page} is simple, the top of the page is for the logo, the left part is for the 
actions and the right part is for the content which is going to be shown after he clicks on one action. The action \emph{Home 
Page} is underlined after the login. The left part remains the same during  all the time that the common user is logged in 
the system, the only thing is going to change is the underlined action, which depends on which action has been chosen. The 
actions that a common user is able to make are:
\begin{enumerate}
 \item \emph{Home Page}: The home page of the common user, where he is redirected after the login.
 \item \emph{Friends Last Position}: This action redirects him to \emph{Section \ref{userFriendLastPositionWeb}}.
 \item \emph{Show all Friends}: This action redirects him to \emph{Section \ref{showFriendsUsersWeb}}.
 \item \emph{Show/Change Account}: This action redirects him to \emph{Section \ref{showChangeAccountWeb}}.
 \item \emph{Logout}: If the common user clicks the \emph{logout button} then he is going to be redirected to the login page 
	    in \emph{Section \ref{loginWeb}}.
\end{enumerate}

\begin{figure}[ht]
\centering
\includegraphics[width=0.6\textwidth]{WebSite/Design/images/userHome.png} 
\caption{User Home Storyboard}
\label{userHomeStoryboardWeb}
\end{figure}

\subsubsection{Admin home page}
\label{adminHomeWeb}
The design of the administrator's \emph{home page} is simple, the top of the page is for the logo, the left part is for the 
actions and the right part is for the content which is going to be shown after he clicks on one action. The action \emph{Home 
Page} is underlined after the login. The left part remains the same during all the time that he is logged in the system, 
the only thing is going to change is the underlined action, which depends on which action has been chosen. The actions that 
an administrator is able to make are:
\begin{enumerate}
 \item \emph{Home Page}: The home page of the administrator, where he is redirected after the login.
 \item \emph{Users Last Position}: This action redirects him to \emph{Section \ref{userFriendLastPositionWeb}}.
 \item \emph{Show all Users}: This action redirects him to \emph{Section \ref{showFriendsUsersWeb}}.
 \item \emph{Search User}: This action redirects him to \emph{Section \ref{searchUserWeb}}.
 \item \emph{Show/Change Account}: This action redirects him to \emph{Section \ref{showChangeAccountWeb}}.
 \item \emph{Create new Admin}: This action redirects him to \emph{Section \ref{createAdminWeb}}.
 \item \emph{Logout}: If the administrator clicks the \emph{logout button} then he is going to be redirected to the login page 
	    in \emph{Section \ref{loginWeb}}.
\end{enumerate}

\begin{figure}[ht]
\centering
\includegraphics[width=0.6\textwidth]{WebSite/Design/images/adminHome.png} 
\caption{Admin Home Storyboard}
\label{adminHomeStoryboardWeb}
\end{figure}

\subsubsection{Users and friends last position}
\label{userFriendLastPositionWeb}
This interface is going to be shown if the action buttons, \emph{Friends Last Position} and \emph{Users Last Position}, 
are pressed on the left part of the page. Also, if the button \emph{History} is pressed from the \emph{Section 
\ref{showFriendsUsersWeb}} and the \emph{Section \ref{actionUserWeb}}. Then in the right part of the page will be dispalyed a 
map which:
\begin{enumerate}
  \item Shows markers with the last positions of all friends or users, of a common user or administrator, respectively. 
	See \emph{Figure \ref{userFriendLastPositionStoryboardWeb}}.
  \item Shows markers with the history of previous positions of the common user who has been selected by the user. See 
	\emph{Figure \ref{userFriendLastPositionStoryboardWeb}}.
  \item Does not show any markers if the common user has no friends or there are no users in the system, who have last position 
	or history stored. See \emph{Figure \ref{emptyuserFriendLastPositionStoryboardWeb}}.
\end{enumerate}  

\begin{figure}[ht]
\centering
\includegraphics[width=0.6\textwidth]{WebSite/Design/images/GoogleMapsLG.jpg} 
\caption{Show Last Position or History Storyboard}
\label{userFriendLastPositionStoryboardWeb}
\end{figure}

\begin{figure}[ht]
\centering
\includegraphics[width=0.6\textwidth]{WebSite/Design/images/world.jpg} 
\caption{Empty Map of Positions Storyboard}
\label{emptyuserFriendLastPositionStoryboardWeb}
\end{figure}

\subsubsection{Show all friends or users}
\label{showFriendsUsersWeb}
This interface is going to be shown if the action buttons \emph{Show All Friends} and \emph{Show All Users}, are pressed on 
the left part of the page. Then in the right side of the page will be displayed a table with all the users and some of their 
account information. See \emph{Figure \ref{showFriendsUsersStoryboardWeb}}. If the user has no friends or there are no users 
in the system, a text message will be displayed referring that no people were found. It will be displayed a specific number 
of users in each page. If the users are more than this number, the \emph{Next} button can be pressed so as to show the other 
users and so on. If the \emph{Next} button is pressed, then for going to previous users the button \emph{Previous} has to be 
pressed. If in the page is shown a table, the user will be able to make these actions by clicking the button:
\begin{enumerate}
  \item \emph{Info}: Watch friends or users complete account information. See \emph{Figure 
	\ref{showFriendsUsersInformationStoryboardWeb}}.
  \item \emph{History}: Watch in a map the history of previous positions of the selected user shown in markers. See 
	\emph{Section \ref{userFriendLastPositionWeb}}. One thing worth mentioning is that if the logged user is 
	administrator, he cannot see the \emph{History} of previous positions of other administrators, because they do not 
	have any positions in the map as they log in only from the website.
\end{enumerate}

\begin{figure}[ht]
\centering
\includegraphics[width=0.6\textwidth]{WebSite/Design/images/ShowUsersFriends.png} 
\caption{Show Friends or Users Storyboard}
\label{showFriendsUsersStoryboardWeb}
\end{figure}

\subsubsection{Show friend or user account information}
\label{showFriendsUsersInformationWeb}
This interface will be shown if the \emph{Info} button is clicked, wherever it is in the entire website. Then in the right part 
of the page will be displayed a table with all the complete account information of the selected user. See \emph{Figure 
\ref{showFriendsUsersInformationStoryboardWeb}}. Something worth mentioning is that if the logged user is administrator then 
it will be displayed one more row which states if the user is an administrator or not. In the \emph{Figure 
\ref{showFriendsUsersInformationStoryboardWeb}} a common user has logged in.

\begin{figure}[ht]
\centering
\includegraphics[width=0.6\textwidth]{WebSite/Design/images/showFriendsUsersAccount.png} 
\caption{Show User Account Information Storyboard}
\label{showFriendsUsersInformationStoryboardWeb}
\end{figure}

\subsubsection{Search user}
\label{searchUserWeb}
This interface will be shown if the administrator clicks the action button, \emph{Search User}. Then in the right part of 
the page will be displayed an empty form. See \emph{Figure \ref{searchUserStoryboardWeb}}. The administrator can fill the 
information he needs so as to find a specified user (not administrators). If the \emph{Submit Search} button is pressed 
the \emph{Action Searched User} interface will be shown.

\begin{figure}[ht]
\centering
\includegraphics[width=0.6\textwidth]{WebSite/Design/images/searchUsers.png} 
\caption{Search User Storyboard}
\label{searchUserStoryboardWeb}
\end{figure}

\subsubsection{Action searched user}
\label{actionUserWeb}
In this interface on the right part of the page will be displayed a table with all users returned from the system after the 
search. If there are no users matching these information a text message stating that there there were no people found. If  
a table is shown, then he will be able to make these actions by clicking the button:
\begin{enumerate}
  \item \emph{Info}: Watch friends or users total account information. See \emph{Figure 
	\ref{showFriendsUsersInformationStoryboardWeb}}.
  \item \emph{History}: Watch in a map the searched user's previous positions shown in markers. See \emph{Section 
	\ref{userFriendLastPositionWeb}}.
  \item \emph{Delete}: Delete a user from the system, after the deletion a message is going to be shown with positive or 
	negative answer.
\end{enumerate}

\begin{figure}[ht]
\centering
\includegraphics[width=0.6\textwidth]{WebSite/Design/images/actionsUsers.png} 
\caption{Action Searched User Storyboard}
\label{actionUserStoryboardWeb}
\end{figure}

\subsubsection{Show change account}
\label{showChangeAccountWeb} 
In this interface on the right part of the page, will be displayed a table with the logged user's  account information, where 
he can also change his account. The form for the nickname is disabled, because he is not able to modify his nickname. See 
\emph{Figure \ref{showChangeAccountStoryboardWeb}}. If the \emph{Submit} button is pressed the modifications will be stored in 
the database and a message will be displayed stating that update was successful. If button \emph{Back} is pressed the user will 
be redirected to his \emph{home page}.

\begin{figure}[ht]
\centering
\includegraphics[width=0.6\textwidth]{WebSite/Design/images/showUserAccount.png} 
\caption{Show Change Personal Account Storyboard}
\label{showChangeAccountStoryboardWeb}
\end{figure}

\subsubsection{Create new admin account}
\label{createAdminWeb}
When this interface is called, on the right side of the page will be displayed an empty form which the administrator has to 
fill with the new admin's account information. See \emph{Figure \ref{createAdminStoryboardWeb}}. If the \emph{Create Admin} 
button is pressed the new account will be stored and a message will be shown stating that the creation of the account was 
successful. If the admin tries to create a new admin with an existing \emph{nickname} then the creation is not going to be 
completed and the system will inform him with an appropriate message.

\begin{figure}[ht]
\centering
\includegraphics[width=0.6\textwidth]{WebSite/Design/images/createAdmin.png} 
\caption{Create Admin Account Storyboard}
\label{createAdminStoryboardWeb}
\end{figure}